<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="交易哈希核验" name="fir" >
      <el-card>
        <template #header>
          <el-row>
            <el-col span="1" >
              交易哈希核验
            </el-col>
            <el-col span="1">
              <el-tooltip class="item" effect="dark" content="交易哈希是版权区块链上存证的唯一证据，您可以核验您所持交易哈希是否是实际发生在链上的一笔交易从而得知您的版权信息是否运用区块链技术同步存储在树图区块链上，并可得到该笔交易的信息" placement="right-start">
                <el-icon :size="15" style="position: relative;left: 5px"><QuestionFilled /></el-icon>
              </el-tooltip>
            </el-col>
          </el-row>
        </template>
        <el-row align="middle" gutter="100px" class="inputRow">
          <el-col span="6">
            <el-input style="width: 400px" type="text" placeholder="请输入以0x为开头的交易哈希" v-model="tradehashSearchContent"/>
          </el-col>
          <el-col span="6">
            <el-button class="searchBtn" color="#626aef"
                       :dark="isDark"
                       plain @click="searchTradeHash">查询</el-button>
          </el-col>
        </el-row>
        <el-descriptions
            class="descriptions"
            :column="1"
            size="large"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                区块哈希
                <el-tooltip class="item" effect="dark" content="区块哈希是一个唯一的66字符的标识符，该标识符在每次交易执行时都会生成" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ blockHash }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                区块高度
                <el-tooltip class="item" effect="dark" content="交易被实际执行的纪元高度" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ eraHeight }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                发送方
                <el-tooltip class="item" effect="dark" content="交易的发送方(可能来自合约地址)" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ from }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                接收方
                <el-tooltip class="item" effect="dark" content="交易的接收方(可以是合约地址)" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ to }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                时间戳
                <el-tooltip class="item" effect="dark" content="交易数据记录的日期和时间" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ timeStamp }}
          </el-descriptions-item>
        </el-descriptions>

      </el-card>
    </el-tab-pane>

    <el-tab-pane label="文件哈希核验" name="sec">
      <el-card>
        <template #header>
          <el-row align="middle" gutter="10px">
            <el-col span="1">
              <span>文件哈希核验</span>
            </el-col>
            <el-col span="1">
              <el-tooltip class="item" effect="dark" content="文件哈希值是由您上传的作品文件而得，它作为您版权信息的唯一标识，可用于与智能合约进行交互获取你在链上所存储的信息" placement="right-start">
                <el-icon :size="15" style="position: relative;left: 5px"><QuestionFilled /></el-icon>
              </el-tooltip>
            </el-col>
          </el-row>
        </template>
        <el-row align="middle" gutter="100px" class="inputRow">
          <el-col span="6">
            <el-input style="width: 400px" type="text" placeholder="请输入文件哈希" v-model="fileHashSearchContent"/>
          </el-col>
          <el-col span="6">
            <el-button class="searchBtn" color="#626aef"
                       :dark="isDark"
                       plain @click="searchFileHash">查询</el-button>
          </el-col>
        </el-row>

        <el-descriptions
            class="descriptions"
            :column="1"
            size="large"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                著作权人链上地址
                <el-tooltip class="item" effect="dark" content="该文件哈希对应的版权作品的著作权人在区块链中的地址" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ copyrightOwnerAddress }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                ipfs文件位置
                <el-tooltip class="item" effect="dark" content="该文件哈希对应版权作品的文件描述信息，该链接为ipfs上的地址，可直接访问" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ workuri }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                著作权人姓名
                <el-tooltip class="item" effect="dark" content="该文件哈希对应版权作品的著作权人姓名" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ copyrightOwnerName }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                著作权人证件号
                <el-tooltip class="item" effect="dark" content="该文件哈希对应版权作品的著作权证件号" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ copyrightOwnerId }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                授权列表
                <el-tooltip class="item" effect="dark" content="该作品通过该买本著作权使用权的用户信息列表，可用于筛选某人是否通过正规渠道获得著作权使用权" placement="top">
                  <el-icon :size="15" style="position: relative;left: 2px;top: 2px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            {{ copyrightOwnerList }}
          </el-descriptions-item>
        </el-descriptions>

      </el-card>
    </el-tab-pane>
    <el-tab-pane label="授权核验" name="thi">
      <el-card>
        <template #header>
          <el-row>
            <el-col span="1">
              授权核验
            </el-col>
            <el-col span="1">
              <el-tooltip class="item" effect="dark" content="输入您的钱包地址以及您购买的版权文件哈希即可验证您是否拥有授权" placement="right-start">
                <el-icon :size="15" style="position: relative;left: 5px"><QuestionFilled /></el-icon>
              </el-tooltip>
            </el-col>
          </el-row>
        </template>
        <el-form class="authorizationForm">
          <el-form-item>
            <el-input placeholder="请输入文件哈希" v-model="fileHashInput">
              <template #prepend>文件哈希</template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input placeholder="请输入钱包地址" v-model="walletAddressInput">
              <template #prepend>钱包地址</template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button size="large" color="#626aef"
                       :dark="isDark"
                       plain @click="searchAuthorization">查询</el-button>
          </el-form-item>
        </el-form>

      </el-card>
    </el-tab-pane>
  </el-tabs>

  <div class="markdown-body" v-html="md">
  </div>


</template>

<script>
import {marked} from 'marked'
import conflux, {ContractCopyright} from "@/conflux/conflux";
import {ElMessage} from "element-plus";
import {Checked,QuestionFilled} from "@element-plus/icons-vue";
import markdownData from '@/assets/blkChainQandA.md';
// eslint-disable-next-line no-unused-vars

export default {
  name: 'VerificateOnChain1',
  components:{
    // eslint-disable-next-line vue/no-unused-components
    Checked,
    QuestionFilled,
  },
  data() {
    return {
      activeName:'fir',
      //交易哈希核验
      blockHash: '暂无数据',
      eraHeight: '暂无数据',
      from: '暂无数据',
      to: '暂无数据',
      timeStamp: '暂无数据',
      tradehashSearchContent: '',
      //文件哈希核验
      account:'',
      copyrightOwnerAddress: '暂无数据',
      workuri: '暂无数据',
      copyrightOwnerName: '暂无数据',
      copyrightOwnerId: '暂无数据',
      copyrightOwnerList: '暂无数据',
      fileHashSearchContent: '',
      //授权核验
      fileHashInput:'',
      walletAddressInput:'',
      md:'',
    }
  },
  created() {
    this.md=marked(markdownData)
  },
  methods:{
    timestampToTime(cjsj) {
      const date = new Date(cjsj * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = date.getDate() + ' '
      const h = date.getHours() + ':'
      const m = date.getMinutes() + ':'
      const s = date.getSeconds()
      return Y + M + D + h + m + s;
    },

    async searchTradeHash() {
      if (this.tradehashSearchContent === '') {
        ElMessage({
          message: '输入不能为空',
          type: 'error'
        })
      } else {
        try {
          const result = await conflux.getTransactionByHash(this.tradehashSearchContent);
          console.log(result);
          try {
            const blk = await conflux.getBlockByHash(result.blockHash);
            this.timeStamp = this.timestampToTime(blk.timestamp);
          }catch (e){
            console.log(e);
            ElMessage({
              message: '区块哈希获取失败',
              type: 'warning'
            })
          }
          this.blockHash = result.blockHash;
          this.eraHeight = result.epochHeight;
          this.from = result.from;
          this.to = result.to;
          ElMessage({
            message: '查询成功',
            type: 'success'
          })
        } catch (e) {
          console.log(e);
          ElMessage({
            message: '查询失败',
            type: 'error'
          })
        }
      }
    },
    async searchFileHash() {
      if (this.fileHashSearchContent === '') {
        ElMessage({
          message: '输入不能为空',
          type: 'error'
        })
      }else {
        try {
          this.copyrightOwnerAddress = await ContractCopyright.contract.ownerOf(this.fileHashSearchContent);
          this.workuri=await ContractCopyright.contract.workURI(this.fileHashSearchContent);
          this.copyrightOwnerList=await ContractCopyright.contract.workdownloaders(this.fileHashSearchContent);
          this.copyrightOwnerName=await ContractCopyright.contract.workOwnername(this.fileHashSearchContent);
          this.copyrightOwnerId=await ContractCopyright.contract.workOwnerid(this.fileHashSearchContent);
          ElMessage({
            message:"查询成功",
            type:'success'
          })
        }catch (e){
          ElMessage({
            message:"无数据",
            type:'success'
          })
        }
      }
    },
    async searchAuthorization() {
      if (this.fileHashInput === '' || this.walletAddressInput === '') {
        ElMessage({
          message: '输入不能为空',
          type: 'error'
        })
      }else {
        try {
          const isProve=await ContractCopyright.contract.isDownload(
              this.fileHashInput,
              this.walletAddressInput
          )
          if(isProve==true){
            ElMessage({
              message:'已授权',
              type:'success'
            })
          }else {
            ElMessage({
              message:'未授权',
              type:'error'
            })
          }
        }catch (e){
          ElMessage({
            message:'无结果',
            type:'error'
          })
        }
      }
    }
  }
}
</script>

<style scoped>
.demo-tabs{
  position: center;
  margin-top: 30px;
  margin-right: 100px;
  margin-left: 200px;
  margin-bottom: 0px;
}
.descriptions{
  padding-right: 400px;
}
.searchBtn{
  position: relative;
  left: 30px;
}
.authorizationForm{
  margin-right: 600px;
}
.inputRow{
  position: relative;
  margin-bottom: 20px;
}
.QandA{
  position: center;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 5%;
}
.markdown-body {
  box-sizing: border-box;
  margin-top: 30px;
  margin-right: 5%;
  margin-left: 10%;
  padding: 0 40px;
}

.el-tabs__active-bar is active{
  background-color: #703cf6;
}
</style>
